<template>
	<view class="service">
		<view class="" v-for="(item,index) in service">
			<view class="service-gz">
				<view class="service-text">
					<text>公众号:</text>
				</view>
				<view class="gphone">
					<text>{{item.gphone}}</text>
				</view>
			</view>
			<view class="service-er">
				<view class="service-kf">
					<text>客服二维码:</text>
				</view>
				<view class="service-img">
					<image :src=" '/static/image/' + item.icon + '.png' " mode=""></image>
				</view>
			</view>
			<view class="service-gz">
				<view class="service-text">
					<text>联系电话:</text>
				</view>
				<view class="gphone">
					<text>{{item.phone}}</text>
				</view>
			</view>
			<view class="service-gz">
				<view class="service-text">
					<text>运营地址:</text>
				</view>
				<view class="gphone">
					<text>{{item.site}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				service: [
					{
						gphone:'11111111',
						icon:"",
						phone:"15451123451",
						site:"山东省济南市"
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.service {
		width: 700rpx;
		height: 500rpx;
		margin: 0 auto;

		.service-gz {
			display: flex;
			margin-top: 50rpx;

			.service-text {
				text {
					letter-spacing: 3rpx;
					font-size: 27rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					white-space:nowrap;
				}
			}

			.gphone {
				text {
					
					letter-spacing: 3rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					height: 100rpx;
					word-break:break-all;
				}
			}
		}

		.service-er {
			margin-top: 20rpx;
			display: flex;

			.service-kf {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			.service-img {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-left: 20rpx;

				image {
					width: 124rpx;
					height: 124rpx;
					border: 1rpx solid red;
				}
			}
		}
	}
</style>
